<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			div {
				width: 200px;
				height: 200px;
				outline: 5px solid gold;
				position: absolute;
			}

			.box {
				/*transform-style: preserve-3d;
				background-color: blue;
				margin: 200px auto 0;
				position: relative;
				transition: 2s;
				transform: rotateY(45deg) rotateX(-45deg);*/

				transform-style: preserve-3d;
				
				/*background-color: pink;*/
				/* 左右居中 */
				margin: 200px auto 0;

				position: relative;

				transform: rotateY(45deg) rotateX(-45deg);

				transition: 2s;
			}


			.box>div {
				opacity: .7;
			}
			


			.box>.a1 {
				background-color: red;
				transform: translateZ(100px);

			}

			.box>.a2 {
				background-color: orange;
				transform: rotateY(180deg) translateZ(100px);
			}

			
		</style>
	</head>
	<body>

		<div class="box">
			<div class="a1"></div>
			<div class="a2"></div>
			<div class="a3"></div>
			<div class="a4"></div>
			<div class="a5"></div>
			<div class="a6"></div>
			<div class="a7"></div>
			<div class="a8"></div>
		</div>
		
	</body>
</html>